import React, { useMemo } from "react"
import { ArrowRight } from "@taroify/icons"
import { Navigator, Text, View } from "@tarojs/components"
import clsx from "clsx"
import styles from "./index.module.scss"

type IProps = {
  className?: string
  title: string
  answer: string
  content: string
  navigationLink: string
}

const GpQAItem: React.FC<IProps> = (props: IProps) => {
  const { className, navigationLink, title, answer, content } = props
  const renderContent = useMemo(() => {
    if (!content) return content
    return content.replace(/\<br\s?\/\>/gi, function () {
      return "\n"
    })
  }, [content])
  return (
    <Navigator url={navigationLink} hoverClass="none">
      <View className={clsx(styles["item"], className)}>
        <View className={styles["qflag"]}>问</View>
        <View className="flex-1 ml-12px">
          <View className="yahei font-normal text-32px text-hex-2c2c35 leading-48px">
            <Text>{title}</Text>
          </View>
          <View className="mt-12px yahei font-normal text-28px text-hex-b8b8bf break-all leading-48px ellipse_2 relative">
            {process.env.TARO_ENV === "swan" ? (
              <Text>
                {answer}：{renderContent}
              </Text>
            ) : (
              <Text userSelect={false}>
                {answer}：{renderContent}
              </Text>
            )}
            <View className={styles["readmore-mask"]}></View>
            <View
              className="yahei font-normal text-24px text-hex-1a8cff align-middle absolute bottom-10px right-0 bg-hex-fff"
              hoverClass="none"
            >
              阅读全文
              <ArrowRight color="#1a8cff" />
            </View>
          </View>
        </View>
      </View>
    </Navigator>
  )
}
export default GpQAItem
